<template>
  <div
    class="table-draggable-handle"
    :class="{ 'mouse-move-start': mouseMoveStart }"
    :style="bodyStyle"
    @mousedown.stop="mousedown">
    <div class="table-draggable-handle-inner"></div>
  </div>
</template>
<script>
  import BindEvent from '../utils/bind-event';

  export default {
    name: 'DraggableResizable',
    components: {},
    props: {
      x: {}
    },
    data() {
      return {
        mouseMoveStart: false
      };
    },
    mounted() {},
    beforeDestroy() {
      this.unbindEvent();
    },
    computed: {
      bodyStyle() {
        return {
          left: this.x - 4 + 'px'
        };
      }
    },
    methods: {
      mousedown(e) {
        this.left = e.clientX;
        this.sourceX = this.x;
        this.mouseMoveStart = true;
        BindEvent.bind(window.document, 'mousemove', this.handleDragMouseMove);
        BindEvent.bind(window.document, 'mouseup', this.handleDragMouseUp);
      },
      handleDragMouseMove(e) {
        let x = e.clientX - this.left;
        // this.left = e.clientX;
        this.$emit('dragging', this.sourceX + x);
      },
      handleDragMouseUp() {
        this.unbindEvent();
        this.mouseMoveStart = false;
        this.$emit('dragstop');
      },
      unbindEvent() {
        BindEvent.unbind(window.document, 'mousemove', this.handleDragMouseMove);
        BindEvent.unbind(window.document, 'mouseup', this.handleDragMouseUp);
      }
    }
  };
</script>
<style scoped lang="scss">
  .table-draggable-handle {
    position: absolute;
    top: 0;
    height: 20px;
    width: 8px;
    &.mouse-move-start {
      .table-draggable-handle-inner {
        display: block;
      }
    }
    .table-draggable-handle-inner {
      width: 1px;
      height: 100%;
      margin-left: 4px;
      border-left: 1px solid #e8e8e8;
      display: none;
    }
  }
  .table-draggable-handle:hover {
    .table-draggable-handle-inner {
      display: block;
    }
  }
</style>
